import { useUserStore } from "@/popup/stores/user";
import { Descriptions, Tooltip } from "antd";
import { useMemo } from "react";
import { CustomSetting } from "./CustomSetting";

export default function SelfCenter() {
  const { userInfo } = useUserStore();
  console.log("userInfo", userInfo);
  console.log(userInfo);
  const items = useMemo(() => {
    return [
      {
        key: "nickname",
        label: "昵称",
        children: userInfo?.userInfo?.nickname,
      },
      {
        key: "level",
        label: "等级",
        children: userInfo?.userInfo?.level,
      },
      {
        key: "money",
        label: "鸡腿",
        children: userInfo?.userInfo?.money,
      },
    ];
  }, [userInfo?.userInfo]);
  return (
    <div className="self-center">
      <div className="baseInfo" style={{ marginTop: '4px' }}>
        <Descriptions column={3} title="基础信息" items={items} />
        <Descriptions style={{ marginTop: '8px' }} column={3}>
          <Descriptions.Item label="id" span={1}>
            {userInfo?.userInfo?.userId}
          </Descriptions.Item>
          <Descriptions.Item label="token" span={2}>
            <Tooltip title={userInfo?.token || userInfo?.userInfo?.token || ""}>
              <div
                style={{
                  maxWidth: "100%",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {userInfo?.token || userInfo?.userInfo?.token}
              </div>
            </Tooltip>
          </Descriptions.Item>
        </Descriptions>
        <div style={{
          margin: '16px 0',
          fontWeight: '600',
          fontSize: '16px',
          color: 'rgba(0 ,0 ,0 ,0.88)'
        }}>偏好设置</div>
        <CustomSetting />
      </div>
    </div>
  );
}
